<template>
  <z-paging 
    ref="pagingRef" 
    v-model="dataList" 
    @query="queryList"
    :auto-show-system-loading="false"
    :loading-more-enabled="false"
  >
    <template #top>
      <wd-navbar 
        title="专项测试" 
        custom-class="navbar-custom" 
        :bordered="false" 
        safeAreaInsetTop
        left-arrow
        @click-left="goBack"
      ></wd-navbar>
    </template>

     <view class="pl-[44rpx] pr-[44rpx] pt-[12rpx] pb-[0rpx] box-border">
       <view 
         class="test-item"
         v-for="item in dataList" 
         :key="item.id"
         @click="handleClick(item)"
       >
         <text class="test-item-text">{{ item.title }}</text>
         <wd-icon name="arrow-right" size="20px"></wd-icon>
       </view>
       <view style="height: 80rpx;"></view>
     </view>
  </z-paging>
</template>

<script setup>
import { ref } from 'vue'
// @ts-ignore
import { paperList } from '@/api/exam.js'

definePage({
  style: {
    navigationStyle: 'custom',
  },
})

defineOptions({
  name: 'SpecialTest',
})

const pagingRef = ref(null)
const dataList = ref([])

// 返回上一页
const goBack = () => {
  uni.navigateBack()
}

// 查询列表数据
const queryList = (pageNo, pageSize) => {
  paperList({
    scope: 1  //强脑产品
  }).then(res => {
    console.log('res---', res)
    pagingRef.value.complete(res);
  }).catch(err => {
    pagingRef.value.complete(false);
  })
}

// 点击列表项
const handleClick = (item) => {
  uni.navigateTo({
    url: `/pages-children/examStart/index?id=${item.id}`
  })
}
</script>

<style>
page{
  background-color: #F1F1F1;
}
</style>

<style lang="scss" scoped>
.test-item {
  height: 100rpx;
  background-image: url('/static/images/bg0.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 48rpx;
  margin-top: 32rpx;
  padding: 32rpx 40rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
  
  &:active {
    transform: scale(0.98);
    opacity: 0.9;
  }
}

.test-item-text {
  font-size: 36rpx;
  font-weight: 500;
  color: #003309;
  line-height: 56rpx;
  text-shadow: 1px 0px 1px rgba(0,0,0,0.2);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.test-item-arrow {
  font-size: 48rpx;
  color: #333;
  font-weight: 300;
  line-height: 44rpx;
}
</style>
